<template>
  <div class="grid-content-b-mark" id="homeApprove">
    <div class="grid-mark-header">
      <div class="vertical"></div>
      <span class="txt">审批中心</span>
      <div>
        <el-badge :value="appovenum.pendingExamine">
          <span @click="sptab(2)" :style="approve == 2 ? 'color:#40A5EA;cursor: pointer;' : 'cursor: pointer;'"> 待我审批 </span>
        </el-badge>
        <span>&nbsp; &nbsp;&nbsp; &nbsp;|&nbsp; &nbsp; &nbsp;&nbsp;</span>
        <el-badge :value="appovenum.copyRecipients">
          <span @click="sptab(4)" :style="approve == 4 ? 'color:#40A5EA;cursor: pointer;' : 'cursor: pointer;'"> 抄送我的 </span>
        </el-badge>
        <span class="icon" style="margin-left: 18px"><i class="el-icon-more" @click="golink('/homepage')"></i></span>
      </div>
    </div>
    <div id="approveContent">
      <ul v-if="tableData.length > 0" v-infinite-scroll="load">
        <li v-for="(item, index) in tableData" :key="index">
          <div class="appove-box-lf">
            <img v-if="false" :src="item.initiatorHeadPhoto" alt style="border-radis: 8px" />
            <div v-else class="def_sub">
              {{ item.initiator && item.initiator.slice(0, 1) }}
            </div>
          </div>
          <div class="appove-box-rt">
            <p>{{ item.initiator }}</p>
            <p v-for="(ite, index) in item.summarys" :key="index">
              <span style="font-size: 12px">{{ ite.name }}:</span>
              <span style="font-size: 14px">{{ ite.value }}</span>
            </p>
          </div>
          <p @click="golink('3', item)" style="padding-right: 15px; color: rgb(64, 165, 234); font-size: 14px; cursor: pointer">前往处理</p>
        </li>
      </ul>
      <el-empty description="暂无审批单据" v-else style="margin-top: 20px"></el-empty>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import instance from "@/config_sp/http";
import Md5 from "js-md5";
export default {
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
    }),
  },
  data() {
    return {
      //审批数量
      appovenum: {
        pendingExamine: 0,
        copyRecipients: 0,
      },
      //切换
      approve: 2,
      //data列表
      tableData: [],
      loading: {},
      pageindex1: 1,
      pagecount1: 0,
    };
  },

  mounted() {
    this.getlogin();
  },
  methods: {
    //tab切换
    sptab(type) {
      this.approve = type;
      this.tableData = [];
      this.pageindex1 = 1;
      this.pagecount1 = 0;
      this.getList();
    },
    load() {
      if (this.pagecount1 >= this.pageindex1 + 1) {
        this.pageindex1++;
      } else {
        return;
      }

      this.getList();
    },
    //获取集合
    getList(isFirst) {
      if (!isFirst) {
        this.loading = this.$loading({
          target: document.getElementById("approveContent"),
          text: "加载中...",
          customClass: "loading",
        });
      }
      let paramsData = {
        Page: this.pageindex1,
        Size: 5,
        approve: this.approve,
      };

      if (this.approve == 4) {
        paramsData.lookState = 1;
      }
      this.$api.interfaceapproval
        .GetBillsList(paramsData, this.$settingSign())
        .then((res) => {
          if (res.data.status == 200) {
            this.tableData.push(...res.data.data.items);
            this.pagecount1 = res.data.data.pageCount;
          }
          this.loading.close();
        })
        .catch(() => {
          this.loading.close();
        });
    },
    //跳转路由
    golink(url, item) {
      if (url == 3) {
        this.$router.push({ name: "homepage", params: { id: item.id, approve: this.approve } });
      } else {
        this.$router.push(url);
      }
    },
    //审批云集成登录
    getlogin() {
      this.loading = this.$loading({
        target: document.getElementById("approveContent"),
        text: "加载中...",
        customClass: "loading",
      });
      let timestamp = Date.parse(new Date());
      let params = {
        appKey: this.userInfo.appKey,
        credentialId: this.userInfo.credentialId,
        userId: this.userInfo.userid,
        customerId: this.userInfo.subid,
        timestamp,
      };
      params.sign = Md5("appKey" + params.appKey + "credentialId" + params.credentialId + "userId" + params.userId + "timestamp" + timestamp);
      this.$api.interfaceapproval
        .getLoginToken(params)
        .then((res) => {
          this.loading.close();
          if (res.data.status == 200) {
            sessionStorage.setItem("sptoken", res.data.data.access_token);
            // 设置请求头
            instance.defaults.headers["Authorization"] = "Bearer " + res.data.data.access_token;
            setTimeout(() => {
              this.ongetApproveStatisticsView();
              this.getList(true);
            }, 500);
          }
        })
        .catch(() => {
          this.loading.close();
        });
    },
    //获取条数
    ongetApproveStatisticsView() {
      this.$api.interfaceapproval.getApproveStatisticsView(this.$settingSign()).then((res) => {
        if (res.data.status == 200) {
          this.appovenum = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.loading) {
  .el-loading-spinner {
    p {
      text-align: center;
    }
  }
}
#approveContent {
  overflow: auto;
  height: 100%;
}
.grid-content-b-mark {
  height: calc(100% - 60px);
  padding: 0px 10px;
  ul {
    height: 100%;
    overflow-y: auto;

    li {
      height: 140px;
      border-bottom: 1px solid #edeef2;
      display: flex;
      padding-top: 20px;
      // align-items: center;
      .appove-box-lf {
        width: 35px;
        height: 35px;
        margin-left: 5px;
        margin-right: 10px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
        border-radius: 50%;
        background: #5d90fd;
        text-align: center;
        img {
          width: 35px;
          height: 35px;
          // width: 100%;
          // height: 100%;
          border-radius: 35px;
        }
        .def_sub {
          font-size: 14px;
          line-height: 35px;
          color: #fff;
        }
      }
      .appove-box-rt {
        flex: 1;
        height: 60px;
        font-size: 13px;
        min-width: 60%;
        p {
          line-height: 24px;
          & > span {
            color: #666666;
          }
        }
      }
      p {
        min-width: 10%;
      }
    }
  }
  // margin-top: 20px;
  .grid-mark-header {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #edeef2;
    font-size: 14px;
    position: relative;

    padding-left: 15px;
    display: flex;
    justify-content: space-between;

    .icon {
      cursor: pointer;

      i {
        transform: rotate(90deg);
      }
    }
    // 小竖线图标
    .vertical {
      display: inline-block;
      height: 14px;
      border-left: 3px solid #85a9f5;
      color: black;
      position: absolute;
      top: 14px;
      left: 6px;
      border-radius: 10px;
    }
  }
}
</style>
